<template>
  <div class="form">
    <van-field
      v-model="mobile"
      type="tel"
      maxlength="11"
      placeholder="请输入手机号"
      class="login-form login-phone"
    />
    <div class="login-form-password">
      <van-field
        v-model="pwd"
        autocomplete="off"
        :type="seePassword"
        placeholder="请输入密码"
        class="login-form login-password"
      />
      <img
        v-if="seePassword === 'text' && pwd === ''"
        src="~assets/login/see_no_password.png"
        class="control-see"
        @click="onChangeType"
      >
      <img
        v-if="seePassword === 'text' && pwd !== ''"
        src="~assets/login/see_password.png"
        class="control-see"
        @click="onChangeType"
      >
      <img
        v-if="seePassword === 'password' && pwd === ''"
        src="~assets/login/no_see_gray.png"
        class="control-see no-see"
        @click="onChangeType"
      >
      <img
        v-if="seePassword === 'password' && pwd !== ''"
        src="~assets/login/no_see.png"
        class="control-see no-see"
        @click="onChangeType"
      >
    </div>
    <template v-if="!inDialog">
      <div
        class="forget-password"
        @click="onForgetPwd"
      >
        忘记密码？
      </div>
      <van-button
        size="large"
        class="login-button"
        :disabled="disabled"
        @click="validateForm"
      >
        登录
      </van-button>
      <div class="register">
        <div class="line" />
        <div
          class="register-button"
          @click="onRegister"
        >
          注册
        </div>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { LOGIN, SET_USER_INFO } from '@/store/mutations'
import { MOBILE_STR, PWD_REG_STR, PWD_TIP } from '@/lib/reg'
import mixins from 'vue-typed-mixins'
import iosBlur from '@/mixins/iosBlur'
const phoneReg = new RegExp(MOBILE_STR)
const pwdReg = new RegExp(PWD_REG_STR)
export default mixins(iosBlur).extend({
  props: {
    inDialog: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      mobile: '',
      pwd: '',
      seePassword: 'password',
      disabled: false,
    }
  },
  methods: {
    // 验证表单
    async validateForm () {
      if (this.mobile === '') {
        this.$toast('手机号不能为空！')
        return false
      }
      if (!phoneReg.test(this.mobile)) {
        this.$toast('手机号格式错误！')
        return false
      }
      if (this.pwd === '') {
        this.$toast('密码不能为空！')
        return false
      }
      return this.onLogin()
    },
    // 登录
    onLogin () {
      if (this.disabled) {
        return false
      }
      this.disabled = true
      return this.$store.dispatch(LOGIN, {
        userName: this.mobile,
        pwd: this.pwd,
      }).then(res => {
        if (this.$route.name === 'login') {
          let redirectInfo = {
            from: 'home',
            query: {},
          }
          const fromPage = sessionStorage.getItem('loginFromPage')
          if (fromPage) {
            redirectInfo = JSON.parse(fromPage)
            sessionStorage.removeItem('loginFromPage')
          }
          const { from, query } = redirectInfo
          this.$router.replace({ name: from as string, query })
          this.$toast('登录成功！')
        } else if (this.$route.name === 'examTest') {
          this.$toast('登录成功，继续做题！')
        }
      }, e => {
        this.disabled = false
        this.$toast(e.message)
      })
    },
    // 切换 是否显示密码图片
    onChangeType () {
      this.seePassword = this.seePassword === 'password' ? 'text' : 'password'
    },
    // 忘记密码
    onForgetPwd () {
      if (this.$route.name === 'login') {
        this.$router.push({ name: 'retrievePassword' })
      } else {
        this.$emit('chgComp', 'RetrievePassword')
      }
    },
    // 注册
    onRegister () {
      if (this.$route.name === 'login') {
        this.$router.push({ name: 'register' })
      } else {
        this.$emit('chgComp', 'RegisterForm')
      }
    },
  },
})
</script>
<style lang="scss" scoped>
@import "~scss/login/login.scss";
</style>
